<template>
  <div>
    <el-row :gutter="5" style="line-height:50px;">
      <el-col :span="8"
        ><el-cascader
          :props="props"
          placeholder="按留言信息搜索"
          style="width:100%;"
          v-model="cValue"
          @change="handleChange"
          @expand-change="handleExpandChange"
          :clearable="true"
        ></el-cascader
      ></el-col>
      <el-col :span="8"
        ><el-input
          placeholder="关键字"
          v-model="searchName"
          :disabled="mFlagInputDisabled"
        ></el-input
      ></el-col>
      <el-col :span="2"
        ><el-button
          type="success"
          @click="init()"
          :disabled="mFlagInputDisabled"
          >搜索</el-button
        ></el-col
      >
    </el-row>

    <el-table :data="list" style="width: 100%; ">
      <el-table-column prop="name" label="姓名" align="center" width="100">
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="手机号码"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="wechat_number"
        label="微信号"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column prop="textarea" label="留言信息" align="center" fit>
      </el-table-column>
      <el-table-column prop="ask.name" label="装修种类" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="150">
        <template slot-scope="scope">
          <!-- 如果不用这样的方法，还真不知道怎么将scope的值赋值给value -->
          <my-selector
            :_id="scope.row._id"
            :options="options"
            :value="scope.row.status"
            @update:selectedValue="updateStatus"
          ></my-selector>
        </template>
        <!--  如果不用这样的方法，还真不知道怎么将scope的值赋值给value -->
      </el-table-column>
    </el-table>

    <my-pagination
      @current-change="handlePageChange"
      ref="myPagination"
      :total="total"
      :pageSize="pageSize"
    ></my-pagination>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import { MessageBox } from "element-ui";
import {
  reqAskTypes,
  reqAskListMessages,
  reqSearchAskListMessages,
  reqUpdateAskMessageStatus
} from "@/apis/AskList";
import { reqUpdateMessageBoardStatus } from "@/apis/MessageBoard";
import { getReqDataNew } from "@/utils/http";
import {
  successDataType,
  failDataType,
  messagesBoardsCollectionType,
  asksCollectionDataType,
  askDetailListsCollectionDataType
} from "CustomTypes";
import { isEqual } from "lodash";
import MyPagination from "@/components/MyPagination.vue";
import MySelector from "@/components/MySelector.vue";

@Component({
  name: "MessageBoard",
  components: { MyPagination, MySelector }
})
export default class MessageBoard extends Vue {
  @Ref("myPagination")
  private myPagination!: MyPagination;

  private pageNum = 1;
  private pageSize = 20;
  private searchName = "";
  private cValue = [];
  /**
   * true 表示按照类型搜索
   * false 表示按照类型+关键字搜索
   */
  private flagProductDesc = false;
  /**
   * true 表示按照类型搜索
   * false 表示按照类型+关键字搜索
   */
  get mFlagInputDisabled() {
    return this.flagProductDesc;
  }
  private expandChangeList: Array<string> = ["textarea"];
  private list: Array<askDetailListsCollectionDataType> = [];
  private id = 0;
  private props: any = {
    lazy: true,
    async lazyLoad(node: any, resolve: any) {
      const { level, value } = node;

      // level === 1 / value === "status"或者"decorationType"
      // console.log(level, value);

      if (isEqual(0, level)) {
        const temp = [
          {
            value: "status",
            label: "按状态搜索",
            leaf: false
          },
          {
            value: "decorationType",
            label: "按装修种类搜索",
            leaf: false
          },
          {
            value: "name",
            label: "按姓名搜索",
            leaf: true
          },
          {
            value: "phone",
            label: "按手机号搜索",
            leaf: true
          },
          {
            value: "textarea",
            label: "按留言信息搜索",
            leaf: true
          }
        ];

        resolve(temp);
      } else if (isEqual(1, level)) {
        this.flagProductDesc = true;
        if (isEqual("decorationType", value)) {
          // todo 下载
          const result = await reqAskTypes();
          const { flag, data } = getReqDataNew(result);

          if (flag) {
            const tempData = (data as successDataType).data;
            const resultData = tempData.map((e: asksCollectionDataType) => ({
              value: e._id,
              label: e.name,
              leaf: true
            }));
            resolve(resultData);
            return;
          }

          MessageBox.alert((data as failDataType).msg, {
            confirmButtonText: "确定",
            type: "error"
          });
        } else {
          resolve([
            { value: "0", label: "工作人员未读", leaf: true },
            { value: "1", label: "客户不接电话", leaf: true },
            { value: "2", label: "客户仅咨询", leaf: true },
            { value: "3", label: "客户没有意向", leaf: true },
            { value: "4", label: "客户有意向", leaf: true }
          ]);
        }
      }
    }
  };
  options = [
    { value: "0", label: "工作人员未读" },
    { value: "1", label: "客户不接电话" },
    { value: "2", label: "客户仅咨询" },
    { value: "3", label: "客户没有意向" },
    { value: "4", label: "客户有意向" }
  ];

  total = 0;
  value = 0;

  /**
   * 当selection中的选项的 leaf === true 的时候，就运行这个
   */
  handleChange(e: Array<string>) {
    this.expandChangeList = [...e];
    this.flagProductDesc =
      isEqual(e[0], "status") || isEqual(e[0], "decorationType");
    if (!isEqual(e.length, 1)) this.init();
  }
  /**
   * 响应分页组件中的点击.
   */
  handlePageChange(page: number) {
    this.pageNum = page;
    this.init();
  }
  /**
   * 当selection中的选项的 leaf === false 的时候，就运行这个
   */
  handleExpandChange(e: Array<string>) {
    this.expandChangeList = [...e];
    this.flagProductDesc =
      isEqual(e[0], "status") || isEqual(e[0], "decorationType");
    if (!isEqual(e.length, 1)) this.init();
  }
  async init() {
    let result: any;

    /**
     * 如果是按照信息的被读取的状态搜索的
     * 如果是按照装修种类搜索的
     */
    if (this.mFlagInputDisabled) {
      if (isEqual(this.expandChangeList[0], "status")) {
        result = await reqSearchAskListMessages({
          page: this.pageNum,
          size: this.pageSize,
          status: this.expandChangeList[1]
        });
      } else if (isEqual(this.expandChangeList[0], "decorationType")) {
        result = await reqSearchAskListMessages({
          page: this.pageNum,
          size: this.pageSize,
          type: this.expandChangeList[1]
        });
      }
    }
    // 如果是按照分类+关键字搜索
    else if (!this.mFlagInputDisabled && !isEqual("", this.searchName)) {
      result = await reqSearchAskListMessages({
        page: this.pageNum,
        size: this.pageSize,
        searchType: this.expandChangeList[0],
        searchKeyWord: this.searchName
      });
    }
    // 正常初始化
    else {
      result = await reqAskListMessages();
    }

    const { flag, data } = getReqDataNew(result);

    if (flag) {
      const tempData = (data as successDataType).data;
      this.total = tempData.length;
      this.list = [...tempData];
      return;
    }
    MessageBox.alert((data as failDataType).msg, {
      confirmButtonText: "确定",
      type: "error"
    });
  }
  async updateStatus(info: { status: any; _id: string }) {
    const { status, _id } = info;
    const result = await reqUpdateAskMessageStatus(_id, status + "");
    const { flag, data } = getReqDataNew(result);

    if (flag) {
      this.list.forEach((e: askDetailListsCollectionDataType) => {
        if (isEqual(_id, e._id)) {
          e.status = status;
        }
      });
      return;
    }

    MessageBox.alert((data as failDataType).msg, {
      confirmButtonText: "确定",
      type: "error"
    });
  }
  mounted() {
    this.init();
  }
}
</script>
<style>
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 50px;
  line-height: 50px;
  text-align: left;
}
</style>
